<div th:fragment="control_chart_gauge">
    <script type="text/javascript">
        var get_gauge_option = function () {
            return {
                tooltip: {
                    trigger:"item",
                    formatter: "{a} <br/>{b} : {c}%"
                },
                series: [],
                sql: ""
            };
        }

        /** 仪表盘元数据 */
        function metadata_gauge(params) {
            var series = {
                type: 'gauge',
                startAngle: 225,
                endAngle: -45,
                radius: '70%',
                column: "SUMVALUE",
                center: ['50%', '50%'],
                splitNumber: 5,
                detail:{
                    show:false
                },
                title:{
                    offsetCenter:[0,"-10%"]
                },
                axisLine: {
                    lineStyle: {
                        width: 8
                    }
                },
                axisTick: {
                    length: 12,
                    lineStyle: {
                        color: 'auto'
                    }
                },
                splitLine: {
                    length: 20,
                    lineStyle: {
                        color: 'auto'
                    }
                },
                data: [{
                    value: 50,
                    name: '药占比'
                }]
            };
            var opt = get_gauge_option();// 每个视图创建新的option，防止相互污染
            opt.series.push(series);
            params = $.extend({}, {
                DATASET: {
                    series: series
                },
                OPTION: opt
            }, params);
            return $.extend(new metadata_chart_base(params), this);
        }

        /** 仪表盘 元数据视图 面板视图 */
        function metadata_view_gauge(control) {
            this.DATASET = function () {
                var view = $($("#DATASET").html());
                var _this = this;
                var option = this.control.getMetadata("OPTION");
                var seriesData = $.extend({}, this.control.getMetadata("DATASET").series);
                var series = option.series, sql = option.sql;

                var setDataSetDetail = function (s) {
                    var name = s.data[0].name, column = s.column, radius = s.radius, startAngle = s.startAngle,
                        endAngle = s.endAngle, center = s.center;
                    var detail_view = $($("#DATASET_DETAIL_GAUGE").html());
                    detail_view.find("input[name=title]").val(name);
                    detail_view.find("input[name=column]").val(column);
                    detail_view.find("input[name=radius]").val(parseInt(radius));
                    detail_view.find("input[name=startAngle]").val(startAngle);
                    detail_view.find("input[name=endAngle]").val(endAngle);
                    detail_view.find("input[name=top]").val(parseInt(center[1]));
                    detail_view.find("input[name=left]").val(parseInt(center[0]));
                    return detail_view;
                }
                var getDataSetDeatil = function () {
                    option.sql = $(view).find("textarea").val();
                    $(view).find(".dataset_detail").each(function (i, item) {
                        var n = $(item).find("input[name=title]").val();
                        var c = $(item).find("input[name=column]").val();
                        var r = $(item).find("input[name=radius]").val();
                        var s = $(item).find("input[name=startAngle]").val();
                        var e = $(item).find("input[name=endAngle]").val();
                        var t = $(item).find("input[name=top]").val();
                        var l = $(item).find("input[name=left]").val();

                        var v = option.series[i].data[0].value;

                        $.extend(option.series[i], {
                            column: c,
                            radius: r + "%",
                            startAngle: s,
                            endAngle: e,
                            center: [l + "%", t + "%"],
                            data: [{
                                name: n,
                                value: v
                            }]
                        });
                        // 					option.series[i].data[0].name = n;
                    });
                }

                $(view).find("textarea").val(sql);
                for (var i in series) {
                    $(view).append(setDataSetDetail(series[i]));
                }
                //增加按钮
                view.find(".add-btn").click(function () {
                    var p = $.extend({}, seriesData);
                    option.series.push(p);
                    $(view).append(setDataSetDetail(p));
                    _this.linkViewOption(option);
                });
                //系列名、字段名
                view.on("keyup", "input,textarea", function () {
                    getDataSetDeatil();
                    _this.linkViewOption(option);
                });
                view.on("focus", "input,textarea", function () {
                    $(this).popover("show");
                });
                view.on("blur", "input,textarea", function () {
                    $(this).popover("hide");
                });

                var restoOpt = new resToOption();
                //SQL执行按钮
                view.on("click", ".sql-btn", function () {
                    var sql = $(view).find("textarea").val();
                    queryChartBySql(sql, "gauge", function (result) {
                        try {
                            result.type = "gauge";
                            option = restoOpt.getOption(result,option);
                            _this.linkViewOption(option);
                        } catch (e) {
                            console.error(e);
                        }
                    });
                });
                //删除按钮
                view.on("click", ".delete-btn", function () {
                    var index = $(this).index(".delete-btn");
                    option.series.splice(index, 1);
                    $(this).parents(".dataset_detail").remove();
                    _this.linkViewOption(option);
                });
                $(this.settingPanel).append(view);
            }
            return $.extend(new metadata_view_chart_base(control), this);
        }
        /** 仪表盘 表单视图 */
        function metadata_form_view_gauge(control) {
            this.control = control;
            this.echart = echarts.init($(control).find(".echarts-div")[0]);
            return $.extend(new metadata_form_view_chart_base(control), this);
        }
    </script>


    <!-- 控制面板 图表-仪表盘  dataSet详细配置 -->
    <script type="text/html" id="DATASET_DETAIL_GAUGE">
        <div class="dataset_detail">
            <table class="setting-control-table">
                <tr>
                    <td class="setting-control-label">名称</td>
                    <td colspan="3"><input name="title" class="form-control" data-content="图表名称" data-trigger="manual"
                                           data-placement="bottom"></td>
                    <td class="setting-control-label">字段</td>
                    <td colspan="3"><input name="column" class="form-control" data-content="配置SQL字段名称"
                                           data-trigger="manual" data-placement="bottom"></td>
                    <td colspan="2">
                        <a href="javascript:;" class="btn btn-default btn-sm delete-btn">删除</a>
                    </td>
                </tr>
                <tr>
                    <td class="setting-control-label">半径(%)</td>
                    <td><input name="radius" class="form-control" data-content="图表显示半径百分比" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">起点(°)</td>
                    <td><input name="startAngle" class="form-control" data-content="指针起点角度" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">终点(°)</td>
                    <td><input name="endAngle" class="form-control" data-content="指针终点角度" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">TOP(%)</td>
                    <td><input name="top" class="form-control" data-content="距顶部占百分比" data-trigger="manual"
                               data-placement="bottom"></td>
                    <td class="setting-control-label">LEFT(%)</td>
                    <td><input name="left" class="form-control" data-content="距右部占百分比" data-trigger="manual"
                               data-placement="bottom"></td>
                </tr>
            </table>
        </div>
    </script>
</div>
